<template>
  <div>
    <div class="w-full flex-center h-[511px] bg-[url('~/assets/images/news_banner.png')] bg-cover">
      <div class="mx-auto">
        <h1 class="banner-main-title text-[#FFFFFF] text-center">
          联合智为·最新动态
        </h1>
        <p class="text-[#FFFFFF] text-sm md:text-4xl mt-10 font-normal text-center">
          您的关注，是我们不懈前行的动力！
        </p>
      </div>
    </div>
    <div class="h-14 bg-[#FBFBFB] border border-[#F4F4F4]">
      <div class="module-con h-full flex space-x-[60px] text-[#616666] leading-[56px]">
        <div id="enterprise" :class="{
            'text-[#222] h-full border-b-[2px] border-[#1393FF] ':
              newsCurrent === 0,
          }" @click="handleTab(0)">
          企业新闻
        </div>
        <div id="industry" :class="{
            'text-[#222] h-full border-b-[2px] border-[#1393FF] ':
              newsCurrent === 1,
          }" @click="handleTab(1)">
          行业动态
        </div>
      </div>
    </div>
    <div class="news-con w-[96%] xl:w-[1200px] mx-auto py-[60px] space-y-12">
      <nuxt-link v-for="(item, index) in com_newsList" :key="index" class="news-item flex" :to="`/news/${item.articleId}`" :title="item.title">
        <div class="w-[18vw] md:h-[11vw]">
          <img :alt="item.title" class="w-full h-full" :src="item.titleImg" />
        </div>
        <div class="ml-[30px] w-0 flex-1 flex flex-col">
          <p class="text-ellipsis overflow-hidden whitespace-nowrap lg:text-[22px] text-[#222]">
            {{ item.title }}
          </p>
          <p class="text-ellipsis overflow-hidden whitespace-nowrap mt-1 lg:mt-5 text-sm lg:text-base">
            {{ item.about }}
          </p>
        </div>
      </nuxt-link>

      <Pagination :page-num="pageNum" :page-size="pageSize" :total="total" @sizeChange="sizeChange" @change="handleChange"></Pagination>
    </div>

    <div class="hidden">
      <nuxt-link v-for="(item, index) in newsList" :key="index" :to="`/case/${item.articleId}`" :title="item.title">{{item.title}}</nuxt-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Pagination from '../../components/Pagination.vue'
export default {
  name: 'News',
  components: { Pagination },
  async asyncData() {
    const { data } = await axios({
      url: 'https://erp.hnlhzw.cn/official/article/api/queryPreviewList',
      method: 'post',
      params: { pageNum: 1, pageSize: 9999, type: 1 },
    })
    return { newsList: data.rows }
  },
  data() {
    return {
      newsCurrent: 0,
      newsList: [],
      pageNum: 1,
      pageSize: 5,
      sort: 'COM',
    }
  },
  head: {
    title: '智慧工地新闻动态-联合智为',
    meta: [
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '联合智为，为您提供智慧工地建设最新行情政策和新闻动态，为您住建信息化监管提供最有价值的参考以及最丰富的信息。',
      },
    ],
  },
  computed: {
    com_newsList() {
      const arr = this.newsList
        .filter((item) => item.sort === this.sort)
        .slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
      return arr
    },
    total() {
      return this.newsList.filter((item) => item.sort === this.sort).length
    },
  },
  mounted() {
    const hash = window.location.hash
    if (hash === '#industry') {
      this.newsCurrent = 1
      this.sort = 'IND'
    }
  },
  methods: {
    handleTab(index) {
      this.newsCurrent = index
      this.pageNum = 1
      this.sort = index ? 'IND' : 'COM'
    },
    sizeChange(size) {
      this.pageSize = size
      this.pageNum = 1
    },
    handleChange(num) {
      this.pageNum = num
    },
    handleRead(id) {
      this.$router.push(`/news/${id}`)
    },
  },
}
</script>

<style></style>
